<template>
  <view class="page">
    <view v-for="item in carList" :key="item.number" class="block">
      <image class="block__icon" src="~@/static/my/car.png" />
      <view class="block__info">
        <text>车牌号码：<text class="yellow">{{item.number}}</text></text>
        <template v-if="isVipCar(item)">
          <view class="vip"><image class="vip__icon" src="~@/static/my/vipIcon.png" />{{ getPackageName(item) }}</view>
          <view class="date">到期时间：{{ YD_dateFormat(item.endTime, 'YYYY-MM-DD hh:mm:ss') }}</view>
        </template>
        <text v-else class="text">开通成为会员，每天停车更省心</text>
      </view>
      <image class="block__arrow" src="~@/static/my/arrow.png" />
    </view>
    <view @click="addBind" class="global-btn">添加车辆</view>
  </view>
</template>

<script>
import { getCarListAPI } from '@/api/car.js';
import { YD_compareDate } from '@/utils/tools';
import { getPackageListAPI } from '@/api/package.js';

export default {
  data() {
    return {
      carList: [],
      packageAllData: []
    }
  },
  onLoad() {
    this.getCarList();
    this.getPackageList()
  },
  onUnload() {
    uni.$off('bind');
  },
  methods: {
    /** @name 获取套餐列表 **/
    getPackageList() {
      getPackageListAPI().then(res => {
        this.packageAllData = res.rows;
      })
    },
    /** @name 获取套餐名称 **/
    getPackageName(item) {
      const target = this.packageAllData.find(o => o.id === item.packageId);
      return target ? target.name : ''
    },
    /** @name 判断是否是会员车辆 **/
    isVipCar(item) {
      if(!item.endTime) return false;
      if(YD_compareDate(item.endTime, new Date(), true) === -1) return false;
      return true;
    },
    /** @name 添加绑定车辆 **/
    addBind() {
      uni.navigateTo({
        url: '/subpages/my/bind/form/form',
        success: () => {
          uni.$once('bind', () => {
            this.getCarList();
          })
        }
      })
    },
    /** @name 获取车辆列表 **/
    getCarList() {
      getCarListAPI().then(res => {
        this.carList = res.rows;
      })
    }
  }
}
</script>

<style  lang="scss">
.page {
  box-sizing: border-box;
  padding: 24rpx 24rpx 28% 24rpx;
}
.block {
  background-color: #fff;
  border-radius: 14rpx;
  color: #333333;
  font-size: 26rpx;
  box-sizing: border-box;
  padding: 24rpx;
  display: flex;
  align-items: center;
  margin-bottom: 24rpx;
  font-weight: bold;
  position: relative;
  .text {
    font-size: 20rpx;
    margin-top: 16rpx;
    font-weight: 400;
    line-height: 1.3;
    color: #999;
  }
  .vip {
    margin-top: 12rpx;
    font-size: 24rpx;
    font-weight: bold;
    color: #fc5b67;
    display: flex;
    align-items: center;
    .vip__icon {
      width: 40rpx;
      height: 40rpx;
      margin-right: 12rpx;
    }
  }
  .date {
    font-size: 24rpx;
    margin-top: 16rpx;
    font-weight: 400;
    line-height: 1.3;
    color: #777;
  }
  .yellow {
    color: #FBBF0D;
  }
}
.block__info {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
}
.block__icon {
  min-width: 64rpx;
  width: 68rpx;
  height: 64rpx;
  margin-right: 24rpx;
}
.block__arrow {
  width: 88rpx;
  height: 88rpx;
}
</style>
